
import { Button, Timeline, Space, Divider  ,Modal,Alert} from "antd";
import {useState,useEffect,useRef} from 'react'
import { ClockCircleOutlined,UserOutlined,TagOutlined,CaretRightOutlined,ArrowRightOutlined,ArrowLeftOutlined,InfoOutlined } from "@ant-design/icons";
import useModalHooks from '@/hooks/ModalHooks.jsx';

import CompleteTask from './CompleteTask.jsx'
import TaskInfo from './TaskInfo.jsx'
import CamundaAPI from "@/api/CamundaApi.js";
function TaskHis(props) {
  const processInstanceId = props.processInstanceId
  const onClose = props.onClose ? props.onClose : () => {};
  const [processInstanceEntity ,setProcessInstanceEntity ] = useState({})
  const currentTaskIdJoin = useRef("");
  const [taskId,setTaskId] = useState("")


  const {
    modalVisible : modalVisibleForCompleteTask,
    setModalVisible:setModalVisibleForCompleteTask,
    openModal:openModalForCompleteTask,
    closeModal:closeModalForCompleteTask
  } = useModalHooks();


  const {
    modalVisible : modalVisibleForTaskInfo,
    setModalVisible:setModalVisibleForTaskInfo,
    openModal:openModalForTaskInfo,
    closeModal:closeModalForTaskInfo
  } = useModalHooks();


  useEffect(()=>{
    CamundaAPI.queryProcessInstanceDetailByInstanceId(processInstanceId).then(
      (r) => {

        r.result.currentTaskList.forEach(item =>{
          currentTaskIdJoin.current = currentTaskIdJoin.current+item.taskId;
        })
        setProcessInstanceEntity(r.result);

       
      }
    );
  },[])

  

  return (
    <div>
    <Timeline>
          <Timeline.Item
            color="green"
            dot={<ClockCircleOutlined style={{ fontSize: "16px" }} />}
          >
            Task Time Line
          </Timeline.Item>
          {processInstanceEntity.hisTaskList &&
          processInstanceEntity.hisTaskList.length
            ? processInstanceEntity.hisTaskList.map((item) => {

                if(currentTaskIdJoin.current.indexOf(item.taskId) != -1){
                  return <Timeline.Item key={item.taskId} color= "red">
                  <TagOutlined /> <b>{item.taskName}</b>
                  <Divider type="vertical"/>
                  <Space>
                  <Button type="default" size="small" icon={<InfoOutlined />} onClick={()=>{setTaskId(item.taskId);openModalForTaskInfo()}}></Button>
                  <Button type="primary" size="small" icon={<CaretRightOutlined />} onClick={()=>{setTaskId(item.taskId);openModalForCompleteTask()}}></Button>
                  </Space>

                  <br/>
                  <ArrowRightOutlined /> {item.taskStartTime}
                 
                </Timeline.Item>
                }else{
                  return <Timeline.Item key={item.taskId} color="green">

                    <TagOutlined /> <b>{item.taskName} </b>  
                    <Divider type="vertical"/>
                    <UserOutlined /> {item.taskAssignee}<br/> 
                    {/* <Divider type="vertical"/>
                    <Button type="default" size="small" icon={<InfoOutlined />} onClick={()=>{setTaskId(item.taskId);openModalForTaskInfo()}}></Button><br/>  */}


                  <ArrowRightOutlined /> [{item.taskStartTime}] <br/> 
                  <ArrowLeftOutlined /> [{item.taskEndTime}]  <br/> 
                  
                </Timeline.Item>
                }
                
})
            : ""}
        </Timeline>



        <Modal
        width={800}
        title="Complete Task"
        open={modalVisibleForCompleteTask}
        footer={null}
        onCancel={closeModalForCompleteTask}
        destroyOnClose={true}
        maskClosable={false}
      >
       <CompleteTask taskId={taskId} onClose={closeModalForCompleteTask}></CompleteTask>
      </Modal>


      <Modal
        width="95%"
        style={{top:"16px"}}
        title="Task Info"
        open={modalVisibleForTaskInfo}
        footer={null}
        onCancel={closeModalForTaskInfo}
        destroyOnClose={true}
        maskClosable={false}
      >
       <TaskInfo taskId={taskId}></TaskInfo>
      </Modal>
    </div>
  );
}

export default TaskHis;
